<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link id="flipper-theme-import" rel="stylesheet">
  <link rel="stylesheet" href="graphiql/graphiql.css">
  <link rel="stylesheet" href="vis/vis.min.css">
  <title>Flipper</title>

  <style>
    #loading {
      -webkit-app-region: drag;
      z-index: 999999;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 50px;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #525252;
      text-align: center;
    }

    .__infinity-dev-box-error {
      background-color: #000;
      font-family: monospace;
      white-space: pre;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div id="root">
    <div id="loading">
      Loading...
    </div>
  </div>


  <div class="__infinity-dev-box __infinity-dev-box-error" hidden>

  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    (function () {
      global.electronRequire = window.require;

      let suppressErrors = false;

      const socket = io(location.origin);

      socket.on('refresh', () => {
        location.reload();
      });

      socket.on('hasErrors', (html) => {
        openError(html);
        suppressErrors = true;
      });

      function openError(text) {
        if (suppressErrors) {
          return;
        }

        const box = document.querySelector('.__infinity-dev-box-error');
        box.removeAttribute('hidden');
        box.textContent = text;
      }

      // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
      try {
        if (JSON.parse(window.process.env.CONFIG).darkMode === 'dark') {
          document.getElementById('flipper-theme-import').href = "themes/dark.css";
        } else {
          document.getElementById('flipper-theme-import').href = "themes/light.css";
        }
      } catch (e) {
        console.error("Failed to initialize theme", e);
        document.getElementById('flipper-theme-import').href = "themes/light.css";
      }

      function init() {
        const script = document.createElement('script');
        script.src = window.process.env.BUNDLE_URL;

        script.onerror = () => {
          openError('Script failure. Check Chrome console for more info.');
        };

        document.body.appendChild(script);
      }
      init();
    })();
  </script>
</body>

</html>